<template>
  <a-list
    class="material-list"
    row-key="id"
    item-layout="vertical"
    :data-source="dataSource"
    v-bind="$attrs"
  >
    <template #renderItem="{ item }">
      <a-list-item :key="item.id">
        <template #actions>
          <a-space>
            <slot name="actions" :item="item"></slot>
          </a-space>
        </template>
        <template #extra>
          <a-image
            :width="300"
            :height="186"
            :alt="item.id"
            :src="item.image"
          />
        </template>
        <a-descriptions size="small" :column="6" bordered>
          <template #title>
            <div class="material-list__list-item-title-wrapper">
              <a-typography-text
                class="material-list__list-item-title"
                :ellipsis="{ tooltip: item.title }"
                :content="`${item.title || '暂无标题'}`"
              />
              <a-typography-text
                class="material-list__list-item-desc"
                :ellipsis="{ tooltip: item.description }"
                :content="`${item.description || '暂无描述'}`"
              />
            </div>
          </template>
          <a-descriptions-item label="ID">{{ item.id }}</a-descriptions-item>
          <a-descriptions-item label="审核">
            <RenderNode :v-node="formatStatus(item.status)" />
          </a-descriptions-item>
          <a-descriptions-item label="构图">
            <RenderNode :v-node="formatStructure(item.structure)" />
          </a-descriptions-item>
          <a-descriptions-item label="来源">{{
            formatSource(item.source)
          }}</a-descriptions-item>
          <a-descriptions-item label="大小">{{
            `${item.width} x ${item.height}`
          }}</a-descriptions-item>
          <a-descriptions-item label="创建时间">{{
            formatTime(item.createTime, 'yyyy-MM-dd')
          }}</a-descriptions-item>
          <a-descriptions-item label="作者ID">{{
            item.authorId
          }}</a-descriptions-item>
          <a-descriptions-item label="用途">
            {{ formatUsage(item.usage) }}
          </a-descriptions-item>
          <a-descriptions-item label="原始尺寸">{{
            item.originalSize
          }}</a-descriptions-item>
          <a-descriptions-item label="文件大小">{{
            `${(item.fileSize / 1024 / 1024).toFixed(2)}M`
          }}</a-descriptions-item>
          <a-descriptions-item label="类型">{{
            formatType(item.type, item.itype)
          }}</a-descriptions-item>
          <a-descriptions-item label="更新时间">{{
            formatTime(item.updateTime, 'yyyy-MM-dd ')
          }}</a-descriptions-item>
          <a-descriptions-item label="作者名">{{
            item.authorName
          }}</a-descriptions-item>
          <a-descriptions-item label="分类" :span="2">
            <RenderNode
              :v-node="formatTag(item.categories || [], 'categories')"
            />
          </a-descriptions-item>
          <a-descriptions-item label="图集" :span="3">
            <RenderNode :v-node="formatAtlasTag(item.atlas || [])" />
          </a-descriptions-item>
          <a-descriptions-item label="标签" :span="6">
            <div class="material-list__tag-list">
              <RenderNode :v-node="formatTag(item.tags || [], 'tag')" />
            </div>
          </a-descriptions-item>
        </a-descriptions>
      </a-list-item>
    </template>
  </a-list>
</template>

<script setup lang="ts">
import { formatTime } from '@/utils/timeHelper'

import useFormat from '../hooks/useFormat'

import { RenderNode } from '@/components/Util'
import type { MaterialItem } from './types'

defineProps<{
  dataSource: MaterialItem[]
}>()

const {
  formatSource,
  formatStructure,
  formatType,
  formatStatus,
  formatTag,
  formatAtlasTag,
  formatUsage,
} = useFormat()
</script>

<style lang="scss" scoped>
@include b(material-list) {
  @include e(list-img-item) {
    width: 325px;
    height: 200px !important;
    object-fit: cover;
  }
  @include e(list-item-title-wrapper) {
    display: flex;
    align-items: baseline;
  }
  @include e(list-item-title) {
    max-width: 200px;
  }
  @include e(list-item-desc) {
    max-width: 500px;
    font-size: 12px;
    font-weight: 400;
    font-style: italic;
    margin-left: 8px;
    color: rgba(0, 0, 0, 0.45);
  }
  @include e(tag-list) {
    display: flex;
    width: 55vw;
    overflow-y: auto;
  }
}
</style>

<style lang="scss">
.material-list {
  .ant-image-img {
    object-fit: contain;
  }
  .ant-list-item-extra {
    margin-right: 8px;
  }
  .ant-list-item {
    padding: 8px 0;
  }
  .ant-descriptions-bordered.ant-descriptions-small
    .ant-descriptions-item-label,
  .ant-descriptions-bordered.ant-descriptions-small
    .ant-descriptions-item-content {
    padding: 6px 8px;
  }
  .ant-descriptions-item-label {
    font-weight: 600;
    font-size: 12px;
  }
  .ant-descriptions-item-content {
    font-size: 12px;
  }
  .ant-descriptions-header {
    margin-bottom: 4px;
  }
  .ant-descriptions-title {
    font-size: 14px;
  }
  .ant-badge-status-text {
    font-size: 12px;
  }
}
</style>
